yExample

Description

The YExample is an element with different optical styles to indicate its different states. The YExample can be used to ...

Some uses for the YExample are:

• UseCase1
• UseCase2

Basic Structure

In the following the basic structure of the YExample shall be explained. For the general structure of a yComponent please visit the YBase-components basic-structure.

The YExample as seen above contains ...

Basic Element 1

The Element 1 can be used to... And contains...

Basic Element 2

The Element 2 can be used to... And contains...

Basic Element 3

The Element 3 can be used to... And contains...

Properties

Through its various properties the YExample can be configured to suit your needs. The display below provides you with an overview of all the YExample properties.

Properties can be changed directly through three methods:

• Inside the Toolbar, which is positioned in your workarea next to your component where you need it. It shows the most important properties, thus providing a fast and efficient way to configure your component in the most basic way.
• It may also occur in the Toolbar Extension, which is a seamless extension accesible as a dropdown item of the Toolbar. It extends the functionality of the Toolbar by providing advanced pickers for most used properties.
• Inside the Detail Panel, which is located in the righthand drawer. Every property of a component can be configured here.

Generic

METAread more

Name: componentId

Not Editable

Number Property

---y-example__component-id

The identifier of the component that is unique within a page.

Name: componentType

Not Editable

String Property

---y-example__component-type

The type of the component. For this component it is y-example.

Name: name

String Property

---y-example__name

The custom name of the component. It serves for better identification of the component.

Name: version

String Property

---y-example__version

The custom version of the Example-component. This can be used to ensure that all components work well together.

Name: coreTheme

String Property

---y-example__core-theme

The CoreTheme, which will be apllied to the Example. For further information on themes visit the themes page.

Name: subTheme

String Property

---y-example__sub-theme

The subtheme subordinated to the previously specified CoreTheme, which will be apllied to the Example. For further information on themes visit the themes page.

Name: groupTheme

String Property

---y-example__group-theme

The group theme is a further variation of the subtheme which is specified especially for variations of a component inside the subtheme. For further information on themes visit the Theme-Manager page.

DISPLAYread more

Name: display

List Property

---y-example__display

This property specifies the display behavior of the component. This can be be set to:

• none
• block
• flex
• inline

Name: position

List Property

---y-example__position

This property specifies the type of positioning method used for the component. This can be be set to:

• static
• relative
• absolute
• sticky
• fixed

Name: visible

Boolean Property

---y-example__visible

This property can toggle the visibility of the component. The two modes are completely hidden and fully shown.

SIZEread more

Name: minWidth

Injectable

UnitNumber Property

---y-example__min-width

The minimum value for the width of the component. This can be set in:

• px
• pt
• em
• vw
• vh
• %

Name: minHeight

Injectable

UnitNumber Property

---y-example__min-height

The minimum value for the height of the component. This can be set in:

• px
• pt
• em
• vw
• vh
• %

Name: width

Injectable

UnitNumber Property

---y-example__width

The value for the width of the component. This can be set in:

• px
• pt
• em
• vw
• vh
• %
• auto

Name: height

Injectable

UnitNumber Property

---y-example__height

The value for the height of the component. This can be set in:

• px
• pt
• em
• vw
• vh
• %
• auto

Name: maxWidth

Injectable

UnitNumber Property

---y-example__max-width

The maximum value for the width of the component. This can be set in:

• px
• pt
• em
• vw
• vh
• %
• none

Name: maxHeight

Injectable

UnitNumber Property

---y-example__max-height

The maximum value for the height of the component. This can be set in:

• px
• pt
• em
• vw
• vh
• %
• none

Name: flex

Number Property

---y-example__flex

The flex property sets the length on flexible items. This sets the value in n-fold shares extrapolated to all other components with the flex display within the same container.

PLACEMENTread more

Name: marginTop

Injectable

UnitNumber Property

---y-example__margin-top

This property creates a space around the component, outside of the top border. This can be set in percent or pixels.

Name: marginRight

Injectable

UnitNumber Property

---y-example__margin-right

This property creates a space around the component, outside of the right border. This can be set in percent or pixels.

Name: marginBottom

Injectable

UnitNumber Property

---y-example__margin-bottom

This property creates a space around the component, outside of the bottom border. This can be set in percent or pixels.

Name: marginLeft

Injectable

UnitNumber Property

---y-example__margin-left

This property creates a space around the component, outside of the left border. This can be set in percent or pixels.

Name: paddingTop

Injectable

UnitNumber Property

---y-example__padding-top

This property creates a space within the component, inside of the top border. This can be set in percent or pixels.

Name: paddingRight

Injectable

UnitNumber Property

---y-example__padding-right

This property creates a space within the component, inside of the right border. This can be set in percent or pixels.

Name: paddingBottom

Injectable

UnitNumber Property

---y-example__padding-bottom

This property creates a space within the component, inside of the bottom border. This can be set in percent or pixels.

Name: paddingLeft

Injectable

UnitNumber Property

---y-example__padding-left

This property creates a space within the component, inside of the top border. This can be set in percent or pixels.

Style

BACKGROUNDread more

Name: bgColor

Injectable

Color Property

---y-example__bg-color

---y-example__bg-color__normal

---y-example__bg-color__hover

---y-example__bg-color__focus

---y-example__bg-color__active

---y-example__bg-color__disabled

The color of the background. This can be set as a color from a palette or a custom hex color.

BORDERread more

Name: borderTopColor

Injectable

Color Property

---y-example__border-top-color

---y-example__border-top-color__normal

---y-example__border-top-color__hover

---y-example__border-top-color__focus

---y-example__border-top-color__active

---y-example__border-top-color__disabled

The color of the top border. This can be set as a color from a palette or a custom hex color.

Name: borderTopStyle

Injectable

List Property

---y-example__border-top-style

---y-example__border-top-style__normal

---y-example__border-top-style__hover

---y-example__border-top-style__focus

---y-example__border-top-style__active

---y-example__border-top-style__disabled

The style of the top border. This can be be set to:

• solid
• dotted
• dashed
• none

Name: borderTopWidth

Injectable

UnitNumber Property

---y-example__border-top-width

---y-example__border-top-width__normal

---y-example__border-top-width__hover

---y-example__border-top-width__focus

---y-example__border-top-width__active

---y-example__border-top-width__disabled

The width of the top border. This can be set in percent or pixels.

Name: borderRightColor

Injectable

Color Property

---y-example__border-right-color

---y-example__border-right-color__normal

---y-example__border-right-color__hover

---y-example__border-right-color__focus

---y-example__border-right-color__active

---y-example__border-right-color__disabled

The color of the right border. This can be set as a color from a palette or a custom hex color.

Name: borderRightStyle

Injectable

List Property

---y-example__border-right-style

---y-example__border-right-style__normal

---y-example__border-right-style__hover

---y-example__border-right-style__focus

---y-example__border-right-style__active

---y-example__border-right-style__disabled

The style of the right border. This can be be set to:

• solid
• dotted
• dashed
• none

Name: borderRightWidth

Injectable

UnitNumber Property

---y-example__border-right-width

---y-example__border-right-width__normal

---y-example__border-right-width__hover

---y-example__border-right-width__focus

---y-example__border-right-width__active

---y-example__border-right-width__disabled

The width of the right border. This can be set in percent or pixels.

Name: borderBottomColor

Injectable

Color Property

---y-example__border-bottom-color

---y-example__border-bottom-color__normal

---y-example__border-bottom-color__hover

---y-example__border-bottom-color__focus

---y-example__border-bottom-color__active

---y-example__border-bottom-color__disabled

The color of the bottom border. This can be set as a color from a palette or a custom hex color.

Name: borderBottomStyle

Injectable

List Property

---y-example__border-bottom-style

---y-example__border-bottom-style__normal

---y-example__border-bottom-style__hover

---y-example__border-bottom-style__focus

---y-example__border-bottom-style__active

---y-example__border-bottom-style__disabled

The style of the bottom border. This can be be set to:

• solid
• dotted
• dashed
• none

Name: borderBottomWidth

Injectable

UnitNumber Property

---y-example__border-bottom-width

---y-example__border-bottom-width__normal

---y-example__border-bottom-width__hover

---y-example__border-bottom-width__focus

---y-example__border-bottom-width__active

---y-example__border-bottom-width__disabled

The width of the bottom border. This can be set in percent or pixels.

Name: borderLeftColor

Injectable

Color Property

---y-example__border-left-color

---y-example__border-left-color__normal

---y-example__border-left-color__hover

---y-example__border-left-color__focus

---y-example__border-left-color__active

---y-example__border-left-color__disabled

The color of the left border. This can be set as a color from a palette or a custom hex color.

Name: borderLeftStyle

Injectable

List Property

---y-example__border-left-style

---y-example__border-left-style__normal

---y-example__border-left-style__hover

---y-example__border-left-style__focus

---y-example__border-left-style__active

---y-example__border-left-style__disabled

The style of the left border. This can be be set to:

• solid
• dotted
• dashed
• none

Name: borderLeftWidth

Injectable

UnitNumber Property

---y-example__border-left-width

---y-example__border-left-width__normal

---y-example__border-left-width__hover

---y-example__border-left-width__focus

---y-example__border-left-width__active

---y-example__border-left-width__disabled

The width of the left border. This can be set in percent or pixels.

Name: borderRadius

Injectable

UnitNumber Property

---y-example__border-radius

The radius of the corners of all the borders. This can be set in percent or pixels.

SHADOWread more

Name: boxShadow

Injectable

Shadow Property

---y-example__box-shadow

---y-example__box-shadow__normal

---y-example__box-shadow__hover

---y-example__box-shadow__focus

---y-example__box-shadow__active

---y-example__box-shadow__disabled

The shadow of the component. This is set by the 4 sub-properties x, y, blur and spread of the shadow-property, which can be further read about in the shadow-property section.

OPACITYread more

Name: opacity

Injectable

Number Property

---y-example__opacity

---y-example__opacity__normal

---y-example__opacity__hover

---y-example__opacity__focus

---y-example__opacity__active

---y-example__opacity__disabled

The opacity of all colored parts of the component. This value is set in percent.

LABELread more

Name: label__fontColor

Injectable

Color Property

---y-example__label__font-color

---y-example__label__font-color__normal

---y-example__label__font-color__hover

---y-example__label__font-color__focus

---y-example__label__font-color__active

---y-example__label__font-color__disabled

The color of the label text. This can be set as a color from a palette or a custom hex color.

Name: label__fontFamily

Injectable

List Property

---y-example__label__font-family

---y-example__label__font-family__normal

---y-example__label__font-family__hover

---y-example__label__font-family__focus

---y-example__label__font-family__active

---y-example__label__font-family__disabled

The font-family of the label text. This can be picked from a large list of provided fonts.

Name: label__fontWeight

Injectable

Number Property

---y-example__label__font-weight

---y-example__label__font-weight__normal

---y-example__label__font-weight__hover

---y-example__label__font-weight__focus

---y-example__label__font-weight__active

---y-example__label__font-weight__disabled

The font-weight of the label text. This can be set in a custom number, as example:

• 400 = normal(regular)
• 500 = medium
• 600 = semi bold
• 700 = bold

Name: label__fontSize

Injectable

UnitNumber Property

---y-example__label__font-size

The font-size of the label text. This can be set in: -cm

• mm
• in
• px
• em
• ex
• ch
• rem

Name: label__fontStyle

Injectable

List Property

---y-example__label__font-style

---y-example__label__font-style__normal

---y-example__label__font-style__hover

---y-example__label__font-style__focus

---y-example__label__font-style__active

---y-example__label__font-style__disabled

The font-style of the label text. This can be set to normal, italic or oblique.

Name: label__textTransform

Injectable

List Property

---y-example__label__text-transform

---y-example__label__text-transform__normal

---y-example__label__text-transform__hover

---y-example__label__text-transform__focus

---y-example__label__text-transform__active

---y-example__label__text-transform__disabled

The text-transformation of the label text. This can be set to:

• capitalize
• uppercase
• lowercase
• none
• full-width

Name: label__fontAlign

Injectable

List Property

---y-example__label__font-align

The font-align of the label text. This property moves the label text to the desired position, it can be set to left, center or right.

Name: label

String Property

---y-example__label

The actual written text in the label. There is no limit to the number of characters.

ICONread more

Name: iconPosition

List Property

---y-example__icon-position

The position of the icon-element inside the Example-component. This can be set to:

• iconLeft
• iconRight
• iconBoth
• none

Name: icon__colorPrimary

Injectable

Color Property

---y-example__icon__color-primary

---y-example__icon__color-primary__normal

---y-example__icon__color-primary__hover

---y-example__icon__color-primary__active

---y-example__icon__color-primary__focus

---y-example__icon__color-primary__disabled

The primary-color of the icon-element inside the Example-component. This can be set as a color from a palette or a custom hex color.

Name: icon__colorSecondary

Injectable

Color Property

---y-example__icon__color-secondary

---y-example__icon__color-secondary__normal

---y-example__icon__color-secondary__hover

---y-example__icon__color-secondary__active

---y-example__icon__color-secondary__focus

---y-example__icon__color-secondary__disabled

The secondary-color of the icon-element inside the Example-component. This can be set as a color from a palette or a custom hex color.

Name: iconSize

Injectable

UnitNumber Property

---y-example__icon-size

The size of the icon. This can be set in: -cm

• mm
• in
• px

Name: iconLeft

Icon Property

---y-example__icon-left

The icon to be set as the left icon of the icon-element inside the Example-component.

Name: iconRight

Icon Property

---y-example__icon-right

The icon to be set as the right icon of the icon-element inside the Example-component.

Example

STATEread more

Name: active

Boolean Property

---y-example__active

This property can disable or enable the active-state of the Example-component.

Name: disabled

Boolean Property

---y-example__disabled

This property can disable or enable the disabled-state of the Example-component.

TOOLTIPread more

Name: tooltip

String Property

---y-example__tooltip

The text of the tooltip, which is displayed when hovering over the Example-component. If you do not insert anything, no tooltip appears.

MISCread more

Name: toggleMode

Boolean Property

---y-example__toggle-mode

This property can configure the Example-component to cause an emit every click or to be used to set a variable true and false. DELETE

Events

CONTROLread more

Name: commitCreate

Boolean Property

---y-example__commit-create

If this property is true the Example emits a command to create a new entity instance in the database on click. Clipboard

Name: commitRead

Boolean Property

---y-example__commit-read

If this property is true the Example emits a command to read an entity instance in the database on click.

Name: commitUpdate

Boolean Property

---y-example__commit-update

If this property is true the Example emits a command to update an entity instance in the database on click.

Name: commitDelete

Boolean Property

---y-example__commit-delete

If this property is true the Example emits a command to delete an entity instance in the database on click.

INPUTread more

Name: clickFunction

EventFunction Property

---y-example__click-function

---

Usage

In this section you'll find a collection of application scenarios and examples that illustrate how to leverage the YExample in ways that deviate from its standard behavior, as defined by yBase. This section aims to inspire and guide you through various possibilities, helping you to implement more complex or unique functionalities tailored to your specific needs. General properties that are universally applicable can be found in the yBase usage section.

Category

Category > Group

The easiest way to configure properties of the GROUP-NAME-PLACEHOLDER-group, is to use the PICKER-NAME-PLACEHOLDER...

Important information about the PROPERTY-NAME-PLACEHOLDER-property is...

tip

If there is something important to say about a property then it should be added like this!

example configuration 1

categoryarrow_forward_iosgrouparrow_forward_iosproperty1property-value1

example configuration 2

categoryarrow_forward_iosgrouparrow_forward_iosproperty2property-value2

example configuration 3

categoryarrow_forward_iosgrouparrow_forward_iosproperty3property-value3

ySelectionPickerarrow_forward_iosgrouparrow_forward_iosproperty3property-value3

YToggleButtonarrow_forward_iosgrouparrow_forward_iosproperty3property-value3

categoryarrow_forward_iostable-bodyarrow_forward_iosproperty3property-value3

categoryarrow_forward_iosgrouparrow_forward_ioscontent__font-family__read-onlyproperty-value3

categoryarrow_forward_iosgrouparrow_forward_iosproperty3property-value3

Category

Category > GROUP-THAT-HAS-A-SPECIAL-PB2-PICKER-PLACEHOLDER

The GROUP-THAT-HAS-A-SPECIAL-PB2-PICKER-PLACEHOLDER-group can be either further configured in the Detail Panel or via the dedicated GROUP-THAT-HAS-A-SPECIAL-PB2-PICKER-PLACEHOLDER Picker that can be found in Toolbar by ACTION-FOR-ACTIVATING-SPECIAL-PICKER-PLACEHOLDER. There you can...

PROPERTY-FROM-PICKER-PLACEHOLDER

The **PROPERTY-FROM-PICKER-PLACEHOLDER**-property can be changed by **ACTION-TO-ADJUST-PROPERTY-PLACEHOLDER**...

CATEGORY-THAT-HAS-A-SPECIAL-PB1-PLACEHOLDER

The CATEGORY-THAT-HAS-A-SPECIAL-PB1-PLACEHOLDER-category's properties can be edited in a special Toolbar by ACTION-FOR-ACTIVATING-SPECIAL-PB1-PLACEHOLDER. There you can...

Inside the special Toolbar the following entries can be found:

• entry 1
• entry 2
• entry 3

Category > GROUP-THAT-IS-INSIDE-A-SPECIAL-PB1-PLACEHOLDER

The GROUP-FROM-PICKER-PLACEHOLDER-group's properties can be changed by ACTION-TO-ADJUST-GROUP-PLACEHOLDER...

PROPERTY-FROM-PICKER-PLACEHOLDER

The **PROPERTY-FROM-PICKER-PLACEHOLDER**-property can be changed by **ACTION-TO-ADJUST-PROPERTY-PLACEHOLDER**...

Category

GROUP-THAT-HAS-A-SPECIAL-PB1-PLACEHOLDER

The GROUP-THAT-HAS-A-SPECIAL-PB1-PLACEHOLDER-group's properties can be edited in a special Toolbar by ACTION-FOR-ACTIVATING-SPECIAL-PB1-PLACEHOLDER. There you can...

Inside the special Toolbar the following entries can be found:

• entry 1
• entry 2
• entry 3

PROPERTY-FROM-PICKER-PLACEHOLDER

The **PROPERTY-FROM-PICKER-PLACEHOLDER**-property can be changed by **ACTION-TO-ADJUST-PROPERTY-PLACEHOLDER**...

Category

Category > Group

Double clicking on Case1 enables the inPlcace-edit for the element. Additionally the special Toolbar Picker becomes available.

Category

Category > Group

The group GROUPNAME only exists in COMPONENTNAME.It is used to configure the STRUCTURE LINK properties: PROPERTIES

Examples of use

Use Case 1

You can use the YExample to...

How to accomplish the use-case:

1. do this
2. do that
3. ...

Use Case 2

You can use the YExample to...

How to accomplish the use-case:

1. do this
2. do that
3. ...

Code examples

You can use the YExample to...

How to accomplish the use-case:

1. do this
2. do that
3. ...

Code Example

This action has four parameters and returns a new string built from those parameters. In this example the user can submit the arguments via input fields and start the action by clicking on the "Send gift" button.

yButton script example

let action = api.actions.create("SendGift");
if (action !== undefined) {
  // Get input field objects by their IDs
  let cstNameObject = api.ui.getObject(12); // inp_name
  let cstAgeObject = api.ui.getObject(13); // inp_age
  let cstGiftObject = api.ui.getObject(15); // inp_gift
  let cstMsgObject = api.ui.getObject(16); // inp_text
  // Create JSON with arguments for RPC and write values of input fields to JSON object
  let jsonArgument = {
    CustName: cstNameObject.get("style", "content", "valueString"),
    CustAge: cstAgeObject.get("style", "content", "valueNumber"),
    CustText: cstMsgObject.get("style", "content", "valueString"),
    CustGift: cstGiftObject.get("style", "content", "valueString"),
  };
  // Keep RPC result stored on server for 300 seconds
  let ttlSeconds = 300;
  action.execute(jsonArgument).then(
    (success) => {
      action.awaitResult().then(
        (success) => {
          console.log(success);
          api.ui.getObject(20).set("style", "content", "value", success.value);
        },
        (error) => {
          alert("error awaitResult");
        }
      );
    },
    (error) => {
      alert("error execute action");
    }
  );
}